<template>
  <a-modal title="采购员每日明细" style="top: 100px;" :visible="isShow" width="1300px" @cancel="handleCancel" @ok="handleCancel">
  <div class="list">
    <div class="content-head" style="margin-bottom: 20px;">
      <div class="sort-keys">
        <span style="margin-left: 20px; margin-right: 6px;">日期:</span>
        <iDatePicker :size="size" :showTime="false" style="margin-left: 10px;" placeholder="不选则不限制" v-model="min_day"></iDatePicker>
        至
        <iDatePicker :size="size" :showTime="false" style="margin-left: 0px;" placeholder="不选则不限制" v-model="max_day"></iDatePicker>
        
        <a-checkbox :checked="isOutPriceCheck ? true : false" @change="onIsOutPriceCheck" :size="size" style="margin-left:10px;">是否只看溢价</a-checkbox>
        
        <a-button :size="size" type="primary" @click="refreshData" style="margin-left:10px;margin-right:10px;">刷新</a-button>
      </div>
    </div>
	<div>
		【汇总统计】
	  <span>
	    采购总金额：<span class="value-font"> {{sum_total.caigou}} </span>
	  </span>
	  <span>
	    物流中：<span class="value-font"> {{sum_total.caigou_status_1}} </span>
	  </span>
	  <span>
	    已入库：<span class="value-font"> {{sum_total.caigou_status_2}} </span>
	  </span>
	  <span>
	    已退货：<span class="value-font"> {{sum_total.cancel}} </span>
	  </span>
	</div>
    <a-table class="table" :rowKey="row => row.uuid" :dataSource="list" :pagination="pagination" :size="size">
  
      <a-table-column title="日期" width="100px">
        <template slot-scope="row">
          <div>{{row.date}}</div>
        </template>
      </a-table-column>
      <a-table-column title="操作员" width="100px">
        <template slot-scope="row">
          <div>{{row.admin_name}}</div>
        </template>
      </a-table-column>
      <a-table-column title="采购总金额" width="100px">
        <template slot-scope="row">
          <div :style="{ color: row.out_price > 0 ? 'red' : 'inherit' }">{{row.caigou}}</div>
        </template>
      </a-table-column>
      <a-table-column title="溢价金额" width="80px">
        <template slot-scope="row">
          <div v-if="row.out_price > 0" style="color:red">{{row.out_price}}</div>
        </template>
      </a-table-column>
	  <a-table-column title="物流中" width="100px">
	    <template slot-scope="row">
	      <div>{{row.caigou_status_1}}</div>
	    </template>
	  </a-table-column>
      <a-table-column title="已入库金额" width="100px">
        <template slot-scope="row">
          <div>{{row.ruku}}</div>
        </template>
      </a-table-column>
      <a-table-column title="状态" width="100px">
        <template slot-scope="row">
          <div v-if="row.status == 1"><a-tag color="blue">满足</a-tag></div>
          <div v-else><a-tag color="red">不满足</a-tag></div>
        </template>
      </a-table-column>

      <a-table-column title="已取消金额" width="100px">
        <template slot-scope="row">
          <div>{{row.cancel2}}</div>
        </template>
      </a-table-column>
      <a-table-column width="100px">
        <div slot="title">
          当日取消金额
          <tips>当天取消的金额,比如3号取消1号的采购,也算是3号的</tips>
        </div>
        <template slot-scope="row">
          <div>{{row.cancel}}</div>
        </template>
      </a-table-column>
      <a-table-column title="备注" width="100px">
        <template slot-scope="row">
          <div>{{row.remark}}</div>
        </template>
      </a-table-column>
      <a-table-column title="操作" width="60px">
        <template slot-scope="row">
          <span>
            <a href="javascript:;" @click="handleEdit(row)">编辑</a>
          </span>
        </template>
      </a-table-column>

    </a-table>
    <ExportPopup @hide="isExport=false" :isShow="isExport"></ExportPopup>
  </div>
  </a-modal>
</template>
<script>
  import moment from 'moment'
  import ISwitch from '@/components/ISwitch/ISwitch'
  import ExportPopup from "./ExportPopup"
  import IDatePicker from "@/components/IDatePicker/IDatePicker.vue"
  
  const resourceType = 'tongji'
  const resourceTypeText = '采购员统计'

  export default {
    components: {
      ISwitch,
      ExportPopup,
      IDatePicker
    },
    props: {
      params: {
        type: Object
      },
      isShow: {
        type: Boolean
      },
      admin_id: {
        type: Number
      },
      min_day: {
        type: String
      },
      max_day: {
        type: String
      }            
    },
    data() {
      return {
        isOutPriceCheck: false,
        is_super : false,
        isExport: false,
        size: 'default',
        resourceTypeText,
        userList: [],
        list: [],
        page: 1,
        per_page: 10,
        total: 0,
        frame: [
          {
            title: '备注',
            type: 'textarea',
            key: 'remark',
            span: 22,
          },
        ],
        filter: {
          min_day: '',
          max_day: ''
        },
		sum_total: {}
      }
    },
    watch: {
      params() {
        this.refreshData()
      },
      min_day() {
        this.refreshData()
      },
      max_day() {
        this.refreshData()
      }      
    },
    computed: {
      pagination() {
        return {
          defaultPageSize: this.per_page,
          defaultCurrent: this.page,
          total: this.total,
          onChange: (e) => {
            this.page = e
            this.fetchData()
          }
        }
      }
    },
    created() {
      if(Vue.ls.get('is_super')){
        this.is_super = true;
      }else{
        this.is_super = false;
      }
      this.getTongjiUserList()
      this.fetchData()
    },
    methods: {
      handleEdit(row) {
        this.$iForm.show({
          title: '编辑',
          frame: this.frame,
          form: row,
          success: (data) => {
            this.$http.put(`/${resourceType}/${row.uuid}`, {
              type: 'update',
              attributes: {
                ...data
              }
            }).then(res => {
              this.fetchData()
              this.$iForm.hide()
            })
          },
        })
      },
      getTongjiUserList() {
        this.$http('/tongji-user', 'GET').then(res => {
          this.userList = res.data.list
        })
      },
      onIsOutPriceCheck (e) {
        this.isOutPriceCheck = e.target.checked
        this.refreshData()
      },
      handleCancel() {
        this.$emit('hide')
      },
      refreshData() {
        this.page = 1
        this.key = ''
        this.fetchData()
      },
      fetchData() {
        this.isEdit = false
        this.$http.get(`/${resourceType}`, {
          params: {
            ...this.params,
            admin_id: this.admin_id,
            page: this.page,
            per_page: this.per_page,
            is_out_price_check: this.isOutPriceCheck,
            created_start_at: this.min_day,
            created_end_at: this.max_day,
          }
        }).then(res => {
          this.list = res.data.list
          this.total = res.data.item_total
          this.sum_total = res.data.sum_total
        }).finally(() => {
          this.loading = false
        })

      },
    }
  }
</script>
<style lang="scss" scoped>
  .value-font {
    font-weight: 500;
    font-size: 110%;
	margin-right:20px;
  }
  .content-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .sort-keys {
    display: flex;
    align-items: center;

    .tab-list {
      display: flex;
      margin-top: 6px;
      border-bottom: 1px solid #e1e1e1;
      margin-right: 50px;

      .item {
        margin-right: 30px;
        padding: 0px 10px 4px 10px;
        cursor: pointer;
        font-weight: 500;

        &.actived {
          color: #1890FF;
          border-bottom: 3px solid #1890FF;
        }

        &:hover {
          color: #1890FF;
        }
      }
    }

  }

  .table {
    .thumb {
      height: 60px;
      border-radius: 6px;
    }

    .content-image {
      height: 60px;
      width: 60px;
      margin-right: 10px;
      margin-bottom: 10px;
      object-fit: cover;
      border-radius: 10px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }
    }

    .user {
      display: flex;
      // flex-wrap: wrap;
      align-items: center;
      img {
        width: 26px;
        height: 26px;
        margin-right: 6px;
        border-radius: 50%;
        overflow: hidden;
      }
      .gender-man, .gender-woman {
        margin-left: 5px;
        font-size: 12px;
      }
      .gender-man {
        color: #409EFF;
      }
      .gender-woman {
        color: #F56C6C;
      }
    }
  }
</style>
